<script setup lang="ts">
import type { IFormItem } from '../types'

const props = withDefaults(
  defineProps<{
    formItems: IFormItem[]
    labelWidth: string | number
    itemStyle: Record<string, string>
    colLayout: Record<string, number>
  }>(),
  {
    formItems: () => [],
    labelWidth: 'auto',
    itemStyle: () => ({ padding: '10px 40px' }),
    colLayout: () => ({
      xl: 6, // ≥ 1920px 6格
      lg: 8, // ≥ 200px 8格
      md: 12, // ≥ 992px 12格
      sm: 24, // ≥ 768px 24格
      xs: 6 // < 768px 24格
    })
  }
)
</script>

<template>
  <div class="hy-form">
    <el-form :label-width="props.labelWidth">
      <el-row>
        <template v-for="item in props.formItems" :key="item.label">
          <el-col v-bind="colLayout">
            <el-form-item :label="item.label" :style="itemStyle">
              <template
                v-if="item.type === 'input' || item.type === 'password'"
              >
                <el-input
                  :placeholder="item.placeholder"
                  :type="item.type"
                  :show-password="item.type === 'password'"
                ></el-input>
              </template>
              <template v-else-if="item.type === 'select'">
                <el-select :placeholder="item.placeholder" style="width: 100%">
                  <el-option
                    v-for="option in item.options"
                    :key="option.value"
                    :value="option.value"
                  >
                    {{ option.label }}
                  </el-option>
                </el-select>
              </template>
              <template v-else-if="item.type === 'datepicker'">
                <el-date-picker v-bind="item.otherOptions" style="width: 100%">
                </el-date-picker>
              </template>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.hy-form {
  padding-top: 18px;
}
</style>
